<!DOCTYPE html>
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	    <title>登录</title>
	    <!-- 引入layui css文件 -->
	    <link rel="stylesheet" href="layui-v2.2.3/layui/css/layui.css">
	    <!-- 自定义 css -->
	    <link rel="stylesheet" href="css/index.css">
        <style>
            body,
        html {
            height: 100%;
            background-color: rgb(159, 188, 220);
        }


        .container {
            height: 90%;
            position: relative;
            overflow: hidden;
        }

        .login-form {
            position: fixed;
            top: 30%;
            left: 35%;
            width: 400px;
            background: rgb(236, 229, 229);
            border-radius: 3px;
            box-shadow: 0 0 10px #333;
        }

        .form-title {
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-bottom: 1px solid silver;
            color: black;
            font-size: 20px;
        }

        .form-group {
            text-align: center;
            padding: 10px 30px;
        }




        .form-input {
            display: inline-block;
            width: 220px;
            height: 30px;
            border-radius: 2px;
            border: 1px solid silver;
            padding-left: 10px;
        }

        .form-label {
            font-family: "宋体";
            font-size: 18px;
        }


        .form-button {
            margin-left: 30px;
            width: 220px;
            height: 30px;
            border: none;
            background: linear-gradient(to right, rgb(232, 119, 211), rgb(33, 211, 205), rgb(104, 52, 233));
            border-radius: 3px;
        }

        .form-group a {
            color: #606060;
        }

        .verifyInfo {
            color: red;
            font-size: 12px;
            display: none;
        }
        </style>
	</head>
	<body>
	<!-- Header -->
	<div class="header">
        <!-- 个性化标题 -->
        <div class="mytitle">
            <label>母婴护理知识共享平台</label>
        </div>
        <!-- 导航栏 -->
        <div class="mymenu-content">
            <ul class="mymenu">
                <li><a href="index.html">首页</a></li>
                <li><a href="message.html">寄语</a></li>
                <li><a href="photos.html">宝贝墙</a></li>
                <li><a href="about.html">营养推荐</a></li>
                <li><a href="aihao.html">疾病预防</a></li>
                <li><a href="books.html">个人中心</a></li>
            </ul>
        </div>
        <!-- 隐藏功能 -->
        <div class="other-functions">
            <a href="login.html">登录</a>
            <label>/</label>
            <a href="register.html">注册</a>
        </div>
        <!-- 搜索框 -->
        <div class="query">
            <input class="keyword" placeholder="搜索内容"/>
            <i class="layui-icon" style="margin-right: 20px; font-size: 18px;">&#xe615;</i>
        </div>
    </div>
    <div class="container">


        <h4 class="form-title">欢迎登录</h4>
        <div class="form-group">
            <label class="form-label" for="user">账户</label>
            <input class="form-input" type="text" name="username" placeholder="请输入账号" id="username">
            <p class="verifyInfo" id="userVerify">请输入帐号！</p>
        </div>
        <div class="form-group">
            <label class="form-label" for="psw">密码</label>
            <input class="form-input" type="password" placeholder="请输入密码" name="username" id="psw">
            <p class="verifyInfo" id="pswVerify">请输入密码！</p>
        </div>
        <div class="form-group">
            <button role="button" type="button" id="login-btn" class="form-button">登录</button>
        </div>
        <div class="form-group">
            <a href="#">忘记密码?</a>
            &nbsp;&nbsp;
            <a href="signin.html">注册</a>
        </div>

    </div>
	</body>
</html>
